import { GarbageBin } from "@/components/dotolist/garbageBin";
import { List } from "@/components/dotolist/list";
import { NewItem } from "@/components/dotolist/newItem";
import { createFileRoute } from "@tanstack/react-router";
import classNames from "classnames";
export const Route = createFileRoute("/dashboard/todoList")({
  component: TodoList,
});

function TodoList() {
  return (
    <>
      <div
        className={classNames(
          "grid w-full h-[700px] grid-cols-6 grid-rows-5 ",
        )}
      >
        <div
          className={classNames(
            "w-[440px] h-[500px]  col-start-1 row-start-2 p-10",
            "border-2 border-black bg-white",
            "flex justify-between items-start rounded-lg "
          )}
        >
          <div className="flex-2 h-full mr-10 overflow-auto ">
            <List />
          </div>
        </div>

        <div
          className={classNames(
            " h-full",
            "flex flex-col justify-start",
            "col-start-3 row-start-2 p-10"
          )}
        >
          <NewItem />
          <GarbageBin className={"mt-100 rounded-lg"} />
        </div>
      </div>
    </>
  );
}
